<template>
  <AcceptHandleHeadComponent
    ref="acceptHandleHeadRef"
    :ucolumns="ucolumns"
    :needDealNum="needDealNum"
    :type="LableTitle.superviseTodo"
    :needMoreQuery="true"
    @setColumns="setColumns"
    @onSearch="onSearch"
    @onReset="reQuery"
  >
    <!-- 其他查询条件 -->
    <div slot="more">
      <a-form layout="inline" class="accept_more_operate_moreForm">
        <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse">
          <a-collapse-panel :show-arrow="false" disabled key="1" style="font-weight: bold">
            <div slot="header" class="accept_more_operate_moreForm_collapse_head">
              <a-row :gutter="48" style="width: 100%">
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="申请人：">
                    <a-input v-model="queryParam.applyname" placeholder="请输入申请人" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="被申请人：">
                    <a-input v-model="queryParam.targetname" placeholder="请输入被申请人" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="来源：">
                    <a-select
                      v-model="queryParam.source"
                      style="width: 220px; font-weight: normal"
                      placeholder="请选择来源"
                      allowClear
                    >
                      <a-select-option v-for="item in Tp_applysourceList" :key="item.value" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
            <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body">
              <a-col @click.stop="() => {}" :md="8" :sm="24">
                <a-form-item label="环节：">
                  <a-select
                    v-model="queryParam.category"
                    style="width: 220px; font-weight: normal"
                    placeholder="请选择环节"
                    allowClear
                  >
                    <a-select-option v-for="item in categoryList" :key="item.value" :value="item.value">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col @click.stop="() => {}" :md="12" :sm="24">
                <a-form-item label="申请时间：">
                  <a-date-picker
                    v-model="queryParam.applyStartDate"
                    :style="{ width: 'calc(50% - 10px)' }"
                    placeholder="开始日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="subtimeListen()"
                  />
                  ~
                  <a-date-picker
                    v-model="queryParam.applyEndDate"
                    :style="{ width: 'calc(50% - 12px)' }"
                    placeholder="结束日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="subtimeListen()"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form>
    </div>

    <template slot="content">
      <!-- 表格数据 -->
      <div class="accept_content_table">
        <a-table
          :scroll="{ x: 1000, y: 550 }"
          :columns="ucolumns"
          :data-source="listData"
          :pagination="upagination"
          :loading="loading"
          rowKey="taskid"
          @change="tableChange"
          size="middle"
          :bordered="ubordered"
          :rowClassName="rowClassName"
          :components="header"
          ref="table"
          :key="tableCountKey"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
          </span>

          <div slot="starttimeSlot" slot-scope="starttime" class="beyond_hiding" style="width: 100%">
            {{ starttime | getTimeFormat('YYYY年M月D日') }}
          </div>

          <div slot="replyBackSlot" slot-scope="text, record" class="overBox" style="width: 100%">
            <a-popover placement="topLeft" v-if="record.replyenddate">
              <template slot="content">
                <span>{{
                  record.replyenddate
                    ? `${record.replyenddate}日截止 ${
                        record && record.replyBack > 0 ? '当前剩余' + record.replyBack + '天' : ''
                      }`
                    : '无截止日期'
                }}</span>
              </template>
              <div style="display: flex; align-items: center; justify-content: space-evenly">
                <div v-if="record.replyBack > 30" class="breathingLampGreen" style="margin-top: 0px"></div>
                <div
                  v-else-if="record.replyBack >= 20 && record.replyBack < 30"
                  class="breathingLampOrange"
                  style="margin-top: 0px"
                ></div>
                <div
                  v-else-if="record.replyBack >= 0 && record.replyBack < 20"
                  class="breathingLampRed"
                  style="margin-top: 0px"
                ></div>
                <span>{{ '剩余' + `${record.replyBack}` + '天' }}</span>
              </div>
            </a-popover>
          </div>

          <div slot="applynameSlot" slot-scope="applyname" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ applyname }}</span>
              </template>
              {{ applyname }}
            </a-tooltip>
          </div>

          <div slot="targetnameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ record.targetname_bz || record.targetname_bs }}</span>
              </template>
              {{ record.targetname_bz || record.targetname_bs }}
            </a-tooltip>
          </div>

          <template slot="operation" slot-scope="text, record">
            <a @click="showHand(record, '3')">处理</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="showHand(record, '4')">详情</a>
          </template>
        </a-table>
      </div>
    </template>
  </AcceptHandleHeadComponent>
</template>

<script>
import { SuperviseCommonMinxin } from '@/views/supervise/SuperviseCommonMinxin'
import moment from 'moment'
const ucolumns = [
  {
    title: '序号',
    width: 50,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '案号',
    dataIndex: 'acceptcode',
    key: 'acceptcode',
    width: 250,
    align: 'center'
  },
  {
    title: '反馈提醒',
    dataIndex: 'replyBack',
    key: 'replyBack',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'replyBackSlot' }
  },
  {
    title: '业务名称',
    dataIndex: 'process',
    key: 'process',
    width: 200,
    align: 'center'
  },
  {
    title: '环节',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    align: 'center'
  },
  {
    title: '反馈截止时间',
    dataIndex: 'replyenddate',
    key: 'replyenddate',
    width: 150,
    align: 'center'
  },
  {
    title: '申请人名称',
    dataIndex: 'applyname',
    key: 'applyname',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'applynameSlot' }
  },
  {
    title: '被申请人名称',
    dataIndex: 'targetname_text',
    key: 'targetname_text',
    width: 250,
    align: 'left',
    scopedSlots: { customRender: 'targetnameSlot' }
  },
  {
    title: '申请时间',
    dataIndex: 'starttime',
    key: 'starttime',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'starttimeSlot' }
  },
  {
    title: '来源',
    dataIndex: 'source_text',
    key: 'source_text',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'sourceSlot' }
  },
  {
    title: '承办人',
    width: 150,
    key: 'dealName',
    dataIndex: 'dealName',
    align: 'center',
    scopedSlots: { customRender: 'dealNameSlot' }
  },
  {
    title: '录入人',
    width: 150,
    key: 'startuserid',
    dataIndex: 'startuserid',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 220,
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'operation' }
  }
]
const categoryList = [
  {
    name: '审查材料',
    value: 'evidence'
  },
  {
    name: '决定',
    value: 'decision'
  },
  {
    name: '通知整改',
    value: 'rectify'
  }
]
export default {
  mixins: [SuperviseCommonMinxin],
  data () {
    return {
      ucolumns: ucolumns,
      categoryList: categoryList
    }
  },
  methods: {
    /**
     * 初始化设置默认值
     */
    initDefaultParam () {
      this.queryParam.userid = this.currentUser.userId
      this.queryParam.bizenum = this.Tp_biztype['supervise'].value
      this.queryParam.matid = '100000_360100-000201005000-QT-002-02'
      this.queryParam.categorynone = 'assignment'
    },
    // 设置对应的枚举值
    setEnumData (listData) {
      if (listData && listData.length > 0) {
        for (var index = 0; index < listData.length; index++) {
          const item = listData[index]
          if (item) {
            // 被申请人名称
            item.targetname_text = item.targetname
            // 来源
            item.source_text = this.sourceLable(item.source)
            // 承办人
            let dealNames = []
            dealNames.push(item.firstname || item.firstname_bs)
            dealNames.push(item.secondname || item.secondname_bs)
            dealNames = dealNames.filter(el => el != null && el != '')
            item.dealName = dealNames.join(',')
            // 截止时间
            if (item.replyenddate) {
              let replyenddate = item.replyenddate
              // YYYY年mm月DD日
              var year = replyenddate.substring(0, replyenddate.indexOf('年'))
              var month = replyenddate.substring(replyenddate.indexOf('年') + 1, replyenddate.indexOf('月'))
              var day = replyenddate.substring(replyenddate.indexOf('月') + 1, replyenddate.indexOf('日'))
              replyenddate = year + '-' + month + '-' + day
              // moment
              item.replyBack = moment(replyenddate).diff(moment(new Date()), 'days')
            } else {
              item.replyBack = null
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';
</style>

<style lang="scss" scoped>
@import '~@/assets/css/apply/breathingLamp.scss';
.cursor_pointer:hover {
  color: #55a7f5;
}
.accept_content {
  &_table {
    &_font_red {
      color: #ca0000;
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
    }

    ::v-deep .ant-table-row-cell-break-word {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
      color: #2c2c2c;
    }

    ::v-deep .ant-table-thead > tr > th {
      height: 50px;
    }

    ::v-deep .ant-table-row-cell-break-word {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 600;
      color: #2c2c2c;
    }

    // ::v-deep .ant-pagination-total-text {
    //   font-size: 16px;
    //   font-family: 'PingFang-SC-Heavy';
    //   font-weight: 400;
    //   color: #8e97b9;
    // }

    ::v-deep .ant-table-body,
    .ant-table-header {
      word-break: break-all;
      &::-webkit-scrollbar {
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        // height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #a2c6e1;
      }
      &::-webkit-scrollbar-track {
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: transparent;
      }
    }
  }
}
</style>
